<template>
  <div
    class="cishu"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="biaoti">分专业监督户次数</div>
    <div class="zu">
      <div class="item">
        <div id="zongshu"></div>
        <div class="shu">{{jianduzongshu}}</div>
        <div class="ms">监督总数</div>
      </div>
      <div class="item">
        <div id="gonggong"></div>
        <div class="shu">{{itemNum.gonggong}}</div>
        <div class="ms">公共场所</div>
      </div>
      <div class="item">
        <div id="jihua"></div>
        <div class="shu">{{itemNum.jihua}}</div>
        <div class="ms">计划生育</div>
      </div>
      <div class="item">
        <div id="xueye"></div>
        <div class="shu">{{itemNum.xueye}}</div>
        <div class="ms">血液安全</div>
      </div>
      <div class="item">
        <div id="canju"></div>
        <div class="shu">{{itemNum.canyin}}</div>
        <div class="ms">餐饮具</div>
      </div>
      <div class="item">
        <div id="xiaodu"></div>
        <div class="shu">{{itemNum.xiaodu}}</div>
        <div class="ms">消毒产品</div>
      </div>

      <div class="item">
        <div id="chuanran"></div>
        <div class="shu">{{itemNum.chuanran}}</div>
        <div class="ms">传染病</div>
      </div>
      <div class="item">
        <div id="weisheng"></div>
        <div class="shu">{{itemNum.yiliao}}</div>
        <div class="ms">医疗卫生</div>
      </div>
      <div class="item">
        <div id="xuexiao"></div>
        <div class="shu">{{itemNum.school}}</div>
        <div class="ms">学校卫生</div>
      </div>
      <div class="item">
        <div id="fangshe"></div>
        <div class="shu">{{itemNum.fangshe}}</div>
        <div class="ms">放射卫生</div>
      </div>
      <div class="item">
        <div id="zhiye"></div>
        <div class="shu">{{itemNum.zhiye}}</div>
        <div class="ms">职业卫生</div>
      </div>
      <div class="item">
        <div id="shenghuo"></div>
        <div class="shu">{{itemNum.yinshui}}</div>
        <div class="ms">饮水卫生</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getJianduhucishu } from "../../api/gaikuang";

import Bus from "@/plugs/bus";

export default {
  name: "cishu",
  props: {},
  data() {
    return {
      loading: true,
      isQuxian: false,
      areaCity: { name: "廊坊市", code: "131000" },
      itemNum: {
        jihua: 0,
        canyin: 0,
        yinshui: 0,
        school: 0,
        xueye: 0,
        wuzheng: 0,
        xiaodu: 0,
        fangshe: 0,
        chuanran: 0,
        gonggong: 0,
        zhiye: 0,
        yiliao: 0
      },
      zongshu: 0,
      itemLv: [100, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    };
  },
  computed: {
    jianduzongshu() {
      let obj = this.itemNum;
      let num = 0;
      for (let val in obj) {
        num += obj[val];
      }
      this.zongshu = num;
      return num;
    }
  },
  methods: {
    async getJson() {
      this.loading = true;
      // try {
      var json = (
        await getJianduhucishu({
          year: this.$store.state.YEAR,
          areaCode: this.areaCity.code
        })
      ).data.data;
      // } catch (error) {
      //  var json = [{"total":0,"code":"01","name":"公共场所"},{"total":0,"code":"02","name":"生活饮用水"},{"total":0,"code":"03","name":"职业卫生"},{"total":0,"code":"04","name":"放射诊疗"},{"total":0,"code":"05","name":"学校卫生"},{"total":0,"code":"06","name":"医疗卫生"},{"total":0,"code":"0701","name":"消毒产品单位"},{"total":0,"code":"0703","name":"传染病防治"},{"total":0,"code":"0704","name":"餐饮具集中消毒单位"},{"total":0,"code":"08","name":"血液安全"},{"total":0,"code":"09","name":"计划生育"},{"total":0,"code":"20","name":"无证单位"}];
      // }
      json.forEach(val => {
        switch (val.name) {
          case "公共场所":
            this.itemNum.gonggong = val.total;
            break;
          case "生活饮用水":
            this.itemNum.yinshui = val.total;
            break;
          case "职业卫生":
            this.itemNum.zhiye = val.total;
            break;
          case "放射诊疗":
            this.itemNum.fangshe = val.total;
            break;
          case "医疗卫生":
            this.itemNum.yiliao = val.total;
            break;
          case "消毒产品单位":
            this.itemNum.xiaodu = val.total;
            break;
          case "传染病防治":
            this.itemNum.chuanran = val.total;
            break;
          case "餐饮具集中消毒单位":
            this.itemNum.canyin = val.total;
            break;
          case "血液安全":
            this.itemNum.xueye = val.total;
            break;
          case "计划生育":
            this.itemNum.jihua = val.total;
          default:
            break;
        }
      });

      setTimeout(() => {
        if (this.zongshu == 0) {
          this.itemLv = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
          this.init();
          return;
        }
        this.itemLv[0] = 100;
        this.itemLv[1] = ((this.itemNum.gonggong / this.zongshu) * 100).toFixed(
          0
        );
        this.itemLv[2] = ((this.itemNum.jihua / this.zongshu) * 100).toFixed(0);
        this.itemLv[3] = ((this.itemNum.xueye / this.zongshu) * 100).toFixed(0);
        this.itemLv[4] = ((this.itemNum.canyin / this.zongshu) * 100).toFixed(
          0
        );
        this.itemLv[5] = ((this.itemNum.xiaodu / this.zongshu) * 100).toFixed(
          0
        );
        this.itemLv[6] = ((this.itemNum.chuanran / this.zongshu) * 100).toFixed(
          0
        );
        this.itemLv[7] = ((this.itemNum.yiliao / this.zongshu) * 100).toFixed(
          0
        );
        this.itemLv[8] = ((this.itemNum.school / this.zongshu) * 100).toFixed(
          0
        );
        this.itemLv[9] = ((this.itemNum.fangshe / this.zongshu) * 100).toFixed(
          0
        );
        this.itemLv[10] = ((this.itemNum.zhiye / this.zongshu) * 100).toFixed(
          0
        );
        this.itemLv[11] = ((this.itemNum.yinshui / this.zongshu) * 100).toFixed(
          0
        );
        this.init();
      });
      this.loading = false;
    },
    drawCircular(id, value) {
      let e = value;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(id));
      // 绘制图表
      let option = {
        title: {
          show: true,
          text: e + "%",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: "12",
            color: "#07ccff",
            fontWeight: "normal"
          }
        },
        color: ["#07ccff", "#0f2d69"],
        tooltip: {
          trigger: "item",
          position: "right",
          formatter: "{b} : {c} ({d}%)"
        },
        series: {
          name: "",
          type: "pie",
          radius: ["80%", "100%"],
          hoverAnimation: false,
          label: {
            normal: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            {
              value: e,
              name: "监督占比"
            },
            {
              value: 100 - e,
              name: "其它项"
            }
          ]
        }
      };
      myChart.setOption(option);
      return myChart;
    },
    init() {
      this.cishu1 = this.drawCircular("zongshu", this.itemLv[0]);
      this.cishu2 = this.drawCircular("gonggong", this.itemLv[1]);
      this.cishu3 = this.drawCircular("jihua", this.itemLv[2]);
      this.cishu4 = this.drawCircular("xueye", this.itemLv[3]);
      this.cishu5 = this.drawCircular("canju", this.itemLv[4]);
      this.cishu6 = this.drawCircular("xiaodu", this.itemLv[5]);

      this.cishu7 = this.drawCircular("chuanran", this.itemLv[6]);
      this.cishu8 = this.drawCircular("weisheng", this.itemLv[7]);
      this.cishu9 = this.drawCircular("xuexiao", this.itemLv[8]);
      this.cishu10 = this.drawCircular("fangshe", this.itemLv[9]);
      this.cishu11 = this.drawCircular("zhiye", this.itemLv[10]);
      this.cishu12 = this.drawCircular("shenghuo", this.itemLv[11]);
    },
    windowChange() {
      this.cishu1.resize();
      this.cishu2.resize();
      this.cishu3.resize();
      this.cishu4.resize();
      this.cishu5.resize();
      this.cishu6.resize();

      this.cishu7.resize();
      this.cishu8.resize();
      this.cishu9.resize();
      this.cishu10.resize();
      this.cishu11.resize();
      this.cishu12.resize();
    }
  },
  created() {
    this.getJson();
    Bus.$on("changeSize", target => {
      this.windowChange();
    });
    Bus.$on("isQuxian", e => {
      this.isQuxian = e;
    });
    Bus.$on("AreaItem", e => {
      this.areaCity = e;
      this.getJson();
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.cishu {
  border: 0.0625rem solid #2c4daa;

  .biaoti {
    font-size: 1.25rem;
    text-align: center;
    color: #07ccff;
    line-height: 3.125rem;
  }

  .zu {
    display: flex;
    flex-wrap: wrap;
    // height: 100%;

    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 3.125rem);
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      background-color: skyblue;
      background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #ededed;
      border-radius: 10px;
    }

    .item {
      display: flex;
      flex-direction: column;
      width: 16.6%;
      // height: 40%;
      //   height: 48%;
      text-align: center;
      font-size: 0.625rem;
      align-items: center;
      justify-content: space-between;

      & > div:nth-of-type(1) {
        width: 3rem;
        height: 3rem;
      }

      .shu {
        color: #07ccff;
        margin-top: 0.2rem;
      }
    }
  }
}
</style>
